<template>
  <div class="wrap">
      <div v-if="user" class="head">
        <user-avatar 
          class="avatar"
          :url="user.info.face+'@80w_80h_1c'"
          @click.native="handleSpace(user.info.uid)"
        />
        <span class="name" @click="handleSpace(user.info.uid)">{{user.info.uname}}</span>
        <span class="time">{{createTime}}</span>
      </div>
      
      <div class="body">
          <div v-if="cover" class="cover">
              <responsive-image class="cover-img" :src="cover" size="@160w_160h_1c" />
          </div>            
          <div class="content">{{description}}</div>
      </div>
  </div>
</template>

<script>
import ResponsiveImage from '@/components/responsive-image'
import UserAvatar from '@/components/user-avatar/UserAvatar'
import { dateFormat } from '@/filters/filters'
export default {
    name: 'LotteryInfo',
    components: {
      ResponsiveImage,
      UserAvatar
    },
    props: {
      info: {
        type: Object
      }
    },
    computed: {
      hasInfo() {
        return !!this.info
      },
      card() {
        let data = null
        if (this.hasInfo) {
            data = JSON.parse(this.info.card)
        }
        return data
      },
      createTime() {
        let time = null
        if (this.card) {
            const item = this.card.item
            const rawTime = item.upload_time || item.timestamp
            time = dateFormat(new Date(rawTime*1000), 'yyyy年MM月dd日 hh:mm')
        }
        return time
      },
      description() {
        let data = null
        if (this.card) {
            data = this.card.item.description || this.card.item.content
        }
        return data
      },
      cover() {
        let data = null
        if (this.card) {
            const arr = this.card.item.pictures
            data = Array.isArray(arr) && arr.length > 0 ? arr[0].img_src : ''
        }
        return data
      },
      user() {
        let data = null
        if (this.hasInfo) {
            data = this.info.desc.user_profile
        }
        return data
      }
    },
    methods: {
      handleSpace(mid) {
        this.$router.push({ name: 'space', params: { mid } })
      }
    }
}
</script>

<style lang="scss" scoped>
.wrap{
    margin-bottom: 10px;
    padding: 10px;
    color: $color-text-primary;
    @include border1px(#e7e7e7, 0 0 1px 0);
    .head {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 50px;
        margin-bottom: 10px;
        min-height: 40px;
        .avatar {
            position: absolute;
            left: 0;
            top: 0;            
        }
        .name {
            font-size: 15px;
            font-weight: 700;            
        }
        .time {
            font-size: 12px;
            color: $color-text-secondary;
        }
    }   
    
    .body {
        display: flex;        
        .cover {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            &-img {
                padding-bottom: 100%;
            }
        }
        .content {
            flex: 1;
            font-size: 14px;
        }
    }
}
</style>